<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ product.name }} - {{ product.product_type_name }} - {{ site_info.name }}</title>
    <link rel="shortcut icon" href="{{ url_for('static', path='favicon.ico') }}" type="image/x-icon">
    <meta name="keywords" content="{{ site_info.keyword }}" />
    <meta name="description" content="{{ site_info.description }}" />
    <meta name="applicable-device" content="pc,mobile" />
    <link href="{{ url_for('static', path='css/bootstrap.min.css') }}" rel="stylesheet" />
	<link href="{{ url_for('static', path='css/bxslider.css') }}" rel="stylesheet" />
	<link href="{{ url_for('static', path='css/style.css') }}" rel="stylesheet" />
	<script src="{{ url_for('static', path='js/jquery.min.js') }}"></script>
	<script src="{{ url_for('static', path='js/bxslider.min.js') }}"></script>
	<script src="{{ url_for('static', path='js/common.js') }}"></script>
	<script src="{{ url_for('static', path='js/bootstrap.min.js') }}"></script>
    <link href="{{ url_for('static', path='css/lightbox.css') }}" rel="stylesheet" />
    <script src="{{ url_for('static', path='js/lightbox.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.showpic_flash').bxSlider({
                pagerCustom: '#pic-page',
                adaptiveHeight: true,
            });

        });
    </script>
</head>
<body>
    {% include 'layout/header.html' %}
    <div class="page_bg" style="background: url({{ url_for('static', path='images/detail_bg.jpg') }}) center top no-repeat;"></div>
    <div class="bread_bg">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="bread_nav">
                        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                        <a href="{{ url_for('index') }}">{{ i18n(key='navigation_home') }}</a> >
                        <a href="{{ url_for('all_product_list') }}">{{ i18n(key='navigation_products') }}</a> >
                        <a href="{{ url_for('product_list', id_=product.product_type_id) }}">{{ product.product_type_name }}</a> >
                        <a href="{{ url_for('product', id_=product.id) }}">{{ product.name }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <!-- left -->
            <div class="col-xs-12 col-sm-4 col-md-3">
                {% include 'layout/product_type_sidebar.html' %}
                {% include 'layout/news_sidebar.html' %}
            </div>
            <!-- right -->
            <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
                <div class="list_box">
                    <!-- showpic -->
                    <div id="layer-photos" class="col-sm-12 col-md-6 showpic_box">
                        <ul class="showpic_flash">
                            <li>
                                <a class="example-image-link" href="javascript:;">
                                    <img class="example-image" src="{{ url_for('upload', path='product/' + (product.id | string) + '.jpg') }}" layer-src="{{ url_for('upload', path='product/' + (product.id | string) + '.jpg') }}" alt="{{ product.name }}"/>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- product_info -->
                    <div class="col-sm-12 col-md-6 proinfo_box">
                        <h1 class="product_h1">{{ product.name }}</h1>
                        <div class="product_info">
                            <P>{{ i18n(key='product_detail_type') }}{{ product.product_type_name }}</P>
                            <p>{{ i18n(key='product_detail_number') }}{{ product.number }}</p>
                            <p>{{ i18n(key='product_detail_brief') }}{{ product.brief }}</p>
                            <div class="product_btn">
                                <a href="http://wpa.qq.com/msgrd?v=3&uin={{ site_info.qq }}&site=qq&menu=yes " target="_blank" class="btn btn-info page-btn">
                                    <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"> </span>{{ i18n(key='product_detail_online_chat') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="product_con">
                        {{ product.description }}
                    </div>
                </div>
                <div class="list_related">
                    <div class="right_head">
                        <h2><span>{{ i18n(key='product_detail_related_products') }}</span></h2>
                    </div>
                    <div class="product_list related_list">
                        {% for rp in related_products %}
                        <div class="col-sm-4 col-md-4 col-mm-6 product_img">
                            <a href="{{ url_for('product', id_=rp.id) }}" title="{{ rp.name }}">
                                <img src="{{ url_for('upload', path='product/' + (rp.id | string) + '.jpg') }}" alt="{{ rp.name }}" class="opacity_img" />
                            </a>
                            <p class="product_title">
                                <a href="{{ url_for('upload', path='product/' + (rp.id | string) + '.jpg') }}" title="{{ rp.name }}">{{ rp.name }}</a>
                            </p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

        </div>
    </div>
    {% include 'layout/footer.html' %}
</body>
<script src="{{ url_for('static', path='layer/layer.js') }}"></script>
<script>
    layer.photos({
        photos: '#layer-photos'
        ,anim: 5
    });
</script>
</html>